<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      @row-click="handleRowDblClick"
      @mousedown.native.stop="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
     <el-button @click="getRowHeight()">Get Row Height (Index 0)</el-button>  
  </div>
</template>  
  
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        // 更多数据...
      ],

      startIndex: null,
      isDragging: false,
      lineHeight: 0,

      startY: 0,
    };
  },
  mounted() {
  //  this.getRowHeight();
  },
  methods: {
    getRowHeight() {
       
      this.$nextTick(() => {
      
        const tableWrapper = this.$refs.table.$el.querySelector(
          ".el-table__body-wrapper"
        );
        // 获取所有行的 DOM 元素（注意：这里可能需要根据实际情况调整选择器）
        const rows = tableWrapper.querySelectorAll(".el-table__row");

        if (rows.length > 0) {
          this.lineHeight = rows[0].offsetHeight;

          console.log(this.lineHeight);
        }
      });
    },
    handleMouseDown(event) {
      let _self = this;
      //  event.stopPropagation();
      const cell = event.target.closest("td");

      const startIndex = cell.parentNode.rowIndex;
      this.startIndex = startIndex;
      if (!this.isDragging) {
        this.endIndex = startIndex;
      }
      this.startY = event.clientY;
      this.isDragging = true;

      console.log("handleMouseDown***********************");
      console.log("this.startIndex:" + this.startIndex);
    },
    handleMouseMove(event) {
      if (!this.isDragging) return;

      const deltaY = event.clientY - this.startY;
      const rows = this.tableData;
      const rowIndex = Math.round(deltaY /this.lineHeight); // 根据鼠标移动的距离计算要选中的行数，20 是每行大致的高度，可以根据实际情况调整
      const endIndex = this.startIndex + rowIndex;
      console.log("endIndex:" + endIndex + " startIndex:" + this.startIndex);
      // if (!this.startIndex || !endIndex) return;

      if (endIndex >= 0 && endIndex < rows.length) {
        for (let i = this.startIndex; i <= endIndex; i++) {
          this.$refs.table.toggleRowSelection(rows[i], true);
        }
        for (let i = endIndex; i <= this.startIndex; i++) {
          this.$refs.table.toggleRowSelection(rows[i], true);
        }
      }
    },
    handleMouseUp() {
      this.isDragging = false;
    },

    handleRowDblClick(row, event) {
      console.log("click", row);
      this.$refs.table.toggleRowSelection(row);
    },
  },
};
</script>  
  
<style scoped>
/* 样式部分可以根据需要调整 */
</style>